<template>
    <div>
        <a-modal title="填写审核意见" centered v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="审核意见" name="auditOpinion">
                            <a-textarea
                                placeholder="请填写需求的可行性分析/必要性分析/方案简述/拒绝原因等限制200个字"
                                :maxlength="200"
                                :auto-size="{ minRows: 4 }"
                                v-model:value="form.auditOpinion"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                auditOpinion: ''
            },
            visible: false,
            rules: {
                auditOpinion: [{ required: true, message: '审核意见不能为空', trigger: 'blur' }]
            }
        });
        const open = () => {
            state.visible = true;
            state.form = {
                auditOpinion: ''
            };
        };
        const handleSave = async () => {
            const d = await unref(ruleFormRef).validate();
            if (d) {
                emit('success', state.form.auditOpinion);
                state.visible = false;
            } else {
                return Promise.reject();
            }
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            open,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>